<!-- index.vue -->
<template>
  <div class="wrapper">
    <header class="main-header">

      <!-- Logo -->
      <a href="index.html" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini">管理</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>数据中台管理系统</b></span>
      </a>

      <!-- Header Navbar: style can be found in header.less -->
      <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
          <span class="sr-only">Toggle navigation</span>
        </a>
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <li>
              <a href="#">
                <span class="hidden-xs"></span>
              </a>
            </li>
            <!-- Tasks: style can be found in dropdown.less -->
            <!-- User Account: style can be found in dropdown.less -->
            <li class="dropdown user user-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <img src="./dist/img/yaoyao.jpg" class="user-image" alt="User Image">
                <span class="hidden-xs">张梦瑶</span>
              </a>
              <ul class="dropdown-menu">
                <!-- User image -->
                <li class="user-header">
                  <img src="./dist/img/yaoyao.jpg" class="img-circle" alt="User Image">
                  <p>
                    张梦瑶 - 开发者
                    <small>设计日期：2022年1月20日</small>
                  </p>
                </li>
              </ul>
            </li>
          </ul>
        </div>

      </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
      <!-- sidebar: style can be found in sidebar.less -->
      <section class="sidebar">
        <ul class="sidebar-menu">
          <li class="active">
            <router-link :to="{ path:'/' }">
              <i class="glyphicon glyphicon-home"></i> <span>主页</span>
            </router-link>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-pie-chart"></i><span>数据源管理</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="adddatasourceinfo"><i class="fa fa-circle-o"></i>数据源添加</router-link></li>
              <li><router-link to="hbaselistdatasourceinfo"><i class="fa fa-circle-o"></i>hbase数据源列表</router-link></li>
              <li><router-link to="hivelistdatasourceinfo"><i class="fa fa-circle-o"></i>hive数据源列表</router-link></li>
              <li><router-link to="clickhouselistdatasourceinfo"><i class="fa fa-circle-o"></i>clickhouse数据源列表</router-link></li>
              <li><router-link to="mysqllistdatasourceinfo"><i class="fa fa-circle-o"></i>mysql数据源列表</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-area-chart"></i><span>数据接入管理</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="inputdatasourceinfo"><i class="fa fa-circle-o"></i>数据接入</router-link></li>
              <li><router-link to="dataaccesslistinfo"><i class="fa fa-circle-o"></i>数据接入列表</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-play"></i><span>数据质量管理</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="dataruleinfo"><i class="fa fa-circle-o"></i>规则定义</router-link></li>
              <li><router-link to="rulelistinfo"><i class="fa fa-circle-o"></i>规则列表</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-play"></i><span>数据质量报告</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="resportnulllistinfo"><i class="fa fa-circle-o"></i>空值校验报告</router-link></li>
              <li><router-link to="resportuniquelistinfo"><i class="fa fa-circle-o"></i>唯一性校验报告</router-link></li>
              <li><router-link to="resportdatevalidlistinfo"><i class="fa fa-circle-o"></i>日期有效性校验报告</router-link></li>
              <li><router-link to="resportvcontainlistinfo"><i class="fa fa-circle-o"></i>值包含校验报告</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-play"></i><span>数据安全管理</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="adddataresourceinfo"><i class="fa fa-circle-o"></i>资源添加</router-link></li>
              <li><router-link to="dataresoucelistinfo"><i class="fa fa-circle-o"></i>资源列表</router-link></li>
              <li><router-link to="myresoureapplylistinfo"><i class="fa fa-circle-o"></i>我的申请列表</router-link></li>
              <li><router-link to="approveresoureapplylistinfo"><i class="fa fa-circle-o"></i>我的审批列表</router-link></li>
              <li><router-link to="hue"><i class="fa fa-circle-o"></i>测试</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-play"></i><span>数据查询IDE</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="hue"><i class="fa fa-circle-o"></i>HUE查询</router-link></li>
            </ul>
          </li>
          <li class="treeview">
            <a href="#">
              <i class="fa fa-play"></i><span>数据血缘以及元数据管理</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
                <!-- <small class="label pull-right bg-green">new</small> -->
              </span>
            </a>
            <ul class="treeview-menu">
              <li><router-link to="atlas"><i class="fa fa-circle-o"></i>atlas</router-link></li>
            </ul>
          </li>
        </ul>
      </section>
      <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <router-view></router-view>
    <!-- /.content-wrapper -->

    <!--<div class="control-sidebar-bg"></div>-->
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    components: {

    },
    mounted(){
      var sUserAgent = navigator.userAgent.toLowerCase();
      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      var bIsMidp = sUserAgent.match(/midp/i) == "midp";
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      var bIsAndroid = sUserAgent.match(/android/i) == "android";
      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        alert(1);
        $("a[href!='#']").attr("data-toggle","offcanvas");
      }else{
        // alert(2);
      }
    },
    methods: {}
  }
</script>
<style>
  /*.skin-blue .main-header .navbar {*/
    /*background-color: #00a65a;*/
  /*}*/
  /*.skin-blue .main-header .logo {*/
    /*background-color: #f43636;*/
  /*}*/
  .skin-blue .sidebar a {
    color: #646464;
  }
</style>
